<template>
  <div class="item" @click="itemClick()">
    <div v-if="isActive" :style="activeStyleIcon" >
      <slot name="active-icon"></slot>
    </div>
    <div v-else :style="activeStyle">
      <slot name="icon"></slot>
    </div>
    <div :style="activeStyleIcon">
      <slot name="context"></slot>
    </div>
  </div>
</template>
<script>
export default {
  name: "tabBarItem",
  props: {
    path: String,
    activeColor: {
      type: String,
      default: "red",
    },
    activeColorIcon:{
      type: String,
      default: "red",
    },
    noActiveColor: {
      type: String,
      default: "bule",
    }
  },
  data() {
    return {
      // isActive: false,
    };
  },
  computed: {
    isActive() {
      //处于活跃的菜单
      return this.$route.path.indexOf(this.path) !== -1;
    },
    activeStyle() {
      // console.log("点击颜色===：", this.activeColor);
      return this.isActive ? { color: this.activeColor } : {};
    },
    // 激活图标颜色
    activeStyleIcon() {
      // console.log("点击颜色===：", this.activeColorIcon);
      return this.isActive ? { color: this.activeColorIcon } : {};
    },
    noActiveStyle(){
      return !this.isActive ? { color: this.noActiveColor } : {};
    }
  },
  methods: {
    itemClick() {
      // console.log("点击==", this.activeColor);
      this.$router.push(this.path);
    },
  },
};
</script>
<style scoped>
.item {
  /* background: hotpink; */
  flex: 1;
}
/* .active {
  color: red;
} */
</style>